<template>
	<view class="body" :style="'height:'+height+'px'">

		<u-button :ripple="true" type="success" ripple-bg-color="rgba(255,255,255,.7)" style="font-weight: bold;color:#FFFFFF;background: rgb(46,193,0);"
		 class="login_button" open-type="getUserInfo" @getuserinfo="getUserInfo">
			<u-icon name="weixin-circle-fill" style="position: absolute;color:#FFFFFF;left: 60rpx;font-size: 45rpx;"></u-icon>
			微信登录
		</u-button>
		

		<u-row class="bottom">
			<u-col span="10">
				<image style="border-radius:0 0 55% 55%;" src="../../static/login/login.svg"></image>
			</u-col>
		</u-row>

	</view>
</template>

<script>
	import hair from "../../js/hairColorRequest.js";
	
	let data = {
		height: 0,
		userInfo: ''
	};
	export default {
		data() {
			return data;
		},
		mounted() {
			uni.getSystemInfo({
				success: function(res) {
					data.height = res.windowHeight;
				}
			});
		},
		methods: {
			getUserInfo() {
				hair.into();
			}
		}
	}
</script>

<style lang="scss">
	.body {
		width: 100%;
		background-image: linear-gradient($global-color-opacity, $global-color);
		// background-image: url(../../static/cool-background.png);
	}


	.bottom {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		text-align: center;
	}

	.login_button {
		position: fixed;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .1);
		width: 400rpx;
		font-size: 30rpx;

		/* #ifndef MP-WEIXIN */
		height: 150rpx;
		border-radius: 100rpx 200rpx 50rpx 100rpx;
		/* #endif */

		/* #ifdef MP-WEIXIN */
		border-radius: 50rpx;
		/* #endif */

		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.login_button:active {
		box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .2);
		font-size: 29rpx;
		/* #ifndef MP-WEIXIN */
		width: 450rpx;
		border-radius: 100rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 398rpx;
		/* #endif */
	}

	.center {
		position: fixed;
		width: 100%;
		bottom: 100rpx;
	}
</style>
